<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!--
        需求：
            从服务器返回一个商品的价格price，这个price值可能是这几种情况：''、null、undefined、60.5
        要求：
            如果是 ''、null、undefined ，页面上统一显示为 -
            如果不是 ''、null、undefined ，则页面上显示真实的数字即可。
        在Vue3中，过滤器已经被移除
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>计算属性方式-商品价格：{{formatPrice}}</h2>
        <h2>方法的方式-商品价格：{{formatPriceFun()}}</h2>
        <h2>过滤器-商品价格：{{price | filterA | filterB(2)}}</h2>
        <!-- 过滤器除了可以使用在插值语法中，也可以使用在v-bind指令上 -->
        <input type="text" :value="price | filterA | filterB(2)">
    </div>

    <div id="app2">
        <h2>全局过滤器-商品价格：{{price | filterA2 | filterB2(3)}}</h2>
    </div>

    <script>
        // 配置全局的过滤器
        Vue.filter('filterA2', function (val) {
            if (val === '' || val === undefined || val === null) {
                return '-'
            }
            return val
        })
        Vue.filter('filterB2', function (val, number) {
            return val.toFixed(number)
        })

        const vm2 = new Vue({
            el: '#app2',
            data: {
                price: 20.3
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '过滤器',
                price: 1
            },
            methods: {
                // 不采用过滤器，使用方法方式实现
                formatPriceFun() {
                    if (this.price === '' || this.price === undefined || this.price === null) {
                        return '-'
                    }
                    return this.price
                }
            },
            computed: {
                // 不采用过滤器，使用计算属性方式实现
                formatPrice() {
                    if (this.price === '' || this.price === undefined || this.price === null) {
                        return '-'
                    }
                    return this.price
                }
            },
            filters: {
                filterA(val) {
                    //val为管道前的值
                    if (val === '' || val === undefined || val === null) {
                        return '-'
                    }
                    return val
                },
                filterB(val, number) {
                    //val为管道前的值（默认传输并为第一个参数）,number为传输的值
                    return val.toFixed(number) // 小数点后多少位
                }
            }
        })


    </script>

</body>

</html>